<script lang="ts" setup="">
import { ref, computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { Sunny, Moon } from '@element-plus/icons-vue'
import globalConfig from '@/config'

const router = useRouter(),
	route = useRoute()

const activatedPath = computed(() =>
	route.fullPath.match(/\/\w*/gi)?.[0].replace('/', ''),
)

const isLightMode = ref<boolean>(true),
	systemStyle = computed(() => (isLightMode.value ? Sunny : Moon))

const langType = ref<string>('简体中文')

const handle_selectMenuItem = (event: string) => {
	router.replace({ path: `/${event}` })
}
</script>

<template>
	<div class="head-bar flex items-center justify-between">
		<div
			class="opgg-title inline-block text-3xl font-semibold text-white pointer"
		>
			cnOP.GG
		</div>
		<div class="function-bar mr-10">
			<el-button plain circle @click="isLightMode = !isLightMode">
				<el-icon size="23px" color="#ffffff">
					<component :is="systemStyle"></component>
				</el-icon>
			</el-button>
			<el-select v-model="langType">
				<el-option
					v-for="item in globalConfig.lang"
					:key="item.value"
					:label="item.title"
					:value="item.value"
				></el-option>
			</el-select>
		</div>
	</div>
	<div class="head-bar-menu">
		<el-menu
			mode="horizontal"
			:default-active="activatedPath"
			background-color="#409eff"
			active-text-color="#ffffff"
			@select="handle_selectMenuItem"
		>
			<el-menu-item
				v-for="menuItem in globalConfig.menu"
				:index="menuItem.key"
				:key="menuItem.key"
				>{{ menuItem.title }}
			</el-menu-item>
		</el-menu>
	</div>
</template>

<style lang="scss" scoped>
@import './style.scss';
</style>
